<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美女手风琴</title>
		<style type="text/css">
		*{margin:0;padding:0;}
		#win{ width: 1000px; height: 437px; border: 5px solid #ccc;}
		li{list-style: none; float: left; overflow:hidden;}
			img{height: 437px;}
		</style>
	</head>
	<script src="js/jquery.js"></script>
	<script src="js/move.js"></script>
	<script>
	$(document).ready(function(){
		
		$('img').wrap('<li></li>');
		$('li:first').css('width',400);
		$('li').not($('li:first')).css({width:100,opacity:0.5});
		$('ul').mouseover(
		$('li').mouseover(function(){
			var _this=$(this);
			_this.timer=setTimeout(function(){
				_this.animate({width:700,opacity:1},300);
				$('li').not(_this).animate({width:50,opacity:0.5},300)
				},100);
				
			_this.mouseout(function(){
			clearTimeout(_this.timer);
				})
			
		})
		
		)
	
		})
		
		
	
	</script>
	<body>
		<ul id="win">
			<img src="img/1.jpg"/>
			<img src="img/2.jpg"/>
			<img src="img/3.jpg"/>
			<img src="img/4.jpg"/>
			<img src="img/5.jpg"/>
			<img src="img/6.jpg"/>
			<img src="img/7.jpg"/>
		</ul>
	</body>
</html>
